<template>
    <div class="login-container">
        <el-form :model="user" :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username">
                    <i class="el-icon-user-solid" slot="prefix"></i>
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="user.password" type="password">
                    <i class="el-icon-s-goods" slot="prefix"></i>
                </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <div class="code-input-container">
                    <el-input v-model="user.code"></el-input>
                    <div @click="loadCode()" class="code-display" :style="{ backgroundImage: 'url(' + getRandomTexture() + ')' }">
                        <span v-for="(char, index) in code" :key="index" :style="{ color: getRandomColor(), transform: getRandomTransform() }">{{ char }}</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handlerlogin" style="width: 100%;">登录</el-button>
                <el-link type="primary" @click="handlerreset">重置表单</el-link>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { codeApi, loginApi } from '@/api/UseApi.js'
import { mapActions } from "vuex"
export default {
    data() {
        return {
            code: '',
            user: {
                username: '',
                password: '',
                code: '',
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名称', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ]
            }
        };
    },
    mounted() {
        this.loadCode()
    },
    methods: {
        ...mapActions(['loadCurrentUserAction']),
        getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        },
        getRandomTransform() {
            const rotate = Math.floor(Math.random() * 30) - 15;
            const skewX = Math.floor(Math.random() * 20) - 10;
            const skewY = Math.floor(Math.random() * 20) - 10;
            return `rotate(${rotate}deg) skew(${skewX}deg, ${skewY}deg)`;
        },
        getRandomTexture() {
            const textures = [
                'https://www.transparenttextures.com/patterns/45-degree-fabric-light.png',
                'https://www.transparenttextures.com/patterns/asfalt-light.png',
                'https://www.transparenttextures.com/patterns/black-linen.png'
            ];
            return textures[Math.floor(Math.random() * textures.length)];
        },
        async loadCode() {
            try {
                const res = await codeApi()
                console.log(res);
                if (res.status === 200) {
                    this.code = res.data.code;
                    this.user.code = this.code;
                } else {
                    this.$message.error(res.msg)
                }
            } catch (error) {
                console.log(error);
                this.$message.error(error);
            }
        },
        handlerlogin() {
            this.$refs.loginForm.validate().then(async () => {
                try {
                    const res = await loginApi(this.user)
                    if (res.status === 200) {
                        localStorage.setItem('token', res.data.token)
                        this.loadCurrentUserAction().then(() => {
                            this.$message({
                                message: '恭喜你，登录成功',
                                type: 'success',
                                duration: 1000,
                                onClose: () => {
                                    this.$router.push({
                                        path: '/main'
                                    });
                                }
                            });
                        }).catch(error => {
                            this.$message.error(error);
                            this.loadCode()
                        });
                    } else {
                        this.$message.error(res.msg)
                        this.loadCode()
                    }
                } catch (error) {
                    this.$message.error('错误');
                    this.loadCode()
                }
            }).catch(() => {
                this.$message.error('错误');
                this.loadCode()
            })
        },
        handlerreset() {
            this.$refs.loginForm.resetFields();
            this.loadCode();
        }
    }
}
</script>

<style scoped lang="less">
.login-container {
    background-image: url('https://picsum.photos/1920/1080');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.demo-ruleForm {
    width: 400px;
    margin: 100px auto;
    padding: 40px;
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.9);

    .el-form-item {
        margin-bottom: 25px;

        .el-input {
            width: 100%;

            .el-input__inner {
                height: 40px;
                border-radius: 4px;
            }

            .el-input__prefix {
                padding: 0 10px;
            }
        }
    }

    .el-button {
        margin-bottom: 15px;
        height: 40px;
        font-size: 16px;
        border-radius: 4px;
        transition: all 0.3s ease;

        &:hover {
            transform: scale(1.02);
        }
    }

    .el-link {
        display: block;
        text-align: center;
        font-size: 14px;
        transition: color 0.3s ease;

        &:hover {
            color: #f56c6c;
        }
    }

    .code-input-container {
        display: flex;
        align-items: center;
        gap: 10px; /* 调整输入框和验证码框之间的间距 */
    }

    .code-display {
        background-color: #f4f4f4;
        border: 1px solid #e4e7ed;
        border-radius: 4px;
        padding: 10px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        height: 40px; /* 设置高度与输入框一致 */
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background-color: #e9e9e9;
        }
    }
}
</style>    